<template>
  <div class="school-course">
    <div class="container">
      <div class="heander">
        <edu-category @patch="handleCategory" :list="categoryList"></edu-category>
      </div>
      <template v-if="courseList.length > 0">
        <edu-course-list
          v-if="courseList.length > 0"
          :courseList="courseList"
          :scribing-price="false"
          @next="handleNext"
        ></edu-course-list>
      </template>
      <edu-no-data v-else></edu-no-data>
      <edu-pagination @handleCurrentChange="handleCurrentChange"></edu-pagination>
    </div>
  </div>
</template>

<script>
import EduCourseList from '@/components/EduCourseList'
import EduNoData from '@/components/EduNoData'
import EduPagination from '@/components/EduPagination'
import EduCategory from '@/components/EduCategory'
export default {
  components: {
    EduCourseList,
    EduNoData,
    EduPagination,
    EduCategory
  },
  data() {
    return {
      courseList: [],
      categoryType: {},
      categoryList: []
    }
  },
  watch: {
    $route(n, o) {
      if (n != o) {
        this.$store.dispatch('paginate/setPaginate', {
          currentPage: 1
        })
        this.handleSchoolCourseList()
      }
    }
  },
  mounted() {
    this.handleSchoolCourseList()
    this.getCategoryInfo()
  },
  methods: {
    // 分页
    handleCurrentChange() {
      this.handleSchoolCourseList()
    },
    // 初始化主页数据
    handleSchoolCourseList() {
      this.$api.getSchoolCourse(
        this.$route.params.id,
        {
          category: this.$route.query.category,
          page: this.$store.getters['paginate/page'],
          count: 32
        },
        res => {
          console.log(res)
          let data = res.data
          this.courseList = data.data
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 32,
            total: data.total
          })
        }
      )
    },
    // 获取分类数据
    getCategoryInfo() {
      this.$api.getCategory(
        {
          type: 0
        },
        res => {
          const data = res.data
          this.categoryList = data
        }
      )
    },
    // 分类
    handleCategory(val) {
      this.$router.push({
        query: {
          category: val
        }
      })
      this.handleSchoolCourseList()
    },
    // 下一页
    handleNext(item) {
      this.$router.push({ path: '/course/' + item.id })
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/hover.scss';
.school-course {
  margin-top: 10px;
  .heander {
    padding: 24px 24px 0;
    background-color: #ffffff;
  }
  ::v-deep .course-list {
    margin-top: 20px;
  }
}
</style>
